<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
    .list-item {
        display: inline-block;
        margin-right: 10px;
    }
    
    .list-enter-active,
    .list-leave-active {
        transition: all 1s;
    }
    
    .list-enter,
    .list-leave-active {
        opacity: 0;
        transform: translateY(30px);
    }
    </style>
    <title>列表过渡</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app" class="">
        <button v-on:click="add">添加</button>
        <button v-on:click="remove">删除</button>
        <transition-group tag="p" name="list">
            <span v-for="item in items" v-bind:key="item" class="list-item">{{ item }}</span>
        </transition-group>
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            nextItem: 10
        },
        methods: {
            randomIndex: function() {
                return Math.floor(Math.random() * this.items.length)
            },
            add: function() {
                this.items.splice(this.randomIndex(), 0, this.nextItem++)
            },
            remove: function() {
            	this.items.splice(this.randomIndex, 1)
            }
        }
    })
    </script>
</body>

</html>
